<template>
	<view>
		<!-- 轮播 -->
		<view class="home">
			<swiper  indicator-dots circular autoplay>
				<swiper-item>
					<image src="../../static/index/a.png"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/index/b.jpg"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
			<!-- <view class="nav_item">
				<view class="iconfont icon-miaosha"></view>
				<text>秒杀</text>
			</view>
			<view class="nav_item">
				<view class="iconfont icon-typecar110"></view>
				<text>团购</text>
			</view> -->
		</view>
		<!-- 推荐商品 -->
		<view class="hot_goods">
			<view class="tit"> 推荐商品</view>
			<!-- 共同页面直接注册成一个组件来用 -->
			<goods-list @goodsItemClick="goGoodsDetail" :hotgoods="hotgoods"></goods-list>
			
			<!-- <view class="goods_list">
				 <view class="goods_item" v-for="item in hotgoods" :key="item.id">
					<image src="../../static/index/goods/jita.webp"></image>
					<view class="price">
						<text>{{item.sell_price}}</text>
						<text>{{item.market_price}}</text>
					</view>
					<view class="name">
						{{item.zhaiyao}}
					</view>
				</view> 
				
				 <view class="goods_item">
					<image src="../../static/index/goods/shouji.webp"></image>
					<view class="price">
						<text>￥2199</text>
						<text>￥2499</text>
					</view>
					<view class="name">
						联想拯救者电竞手机2 Pro 12GB+128GB 
					</view>
				</view>
				
				<view class="goods_item">
					<image src="../../static/index/goods/fo.jpg"></image>
					<view class="price">
						<text>￥2199</text>
						<text>￥2499</text>
					</view>
					<view class="name">
						祥祯福 冰种翡翠观音玉佛吊坠
					</view>
				</view> 
				
			</view> -->
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				swipers:[],
				hotgoods:[],
				navs:[
					{
						icon:'iconfont icon-Bag',
						title:'商品',
						path:'/pages/goods/goods'
					},
					{
						icon:'iconfont icon-miaosha',
						title:'秒杀',
						path:'/pages/miaosha/miaosha'
					},
					{
						icon:'iconfont icon-typecar110',
						title:'团购',
						path:'/pages/tuangou/tuangou'
					}
				]
			}
		},
		onLoad() {
			this.getSwipers()
			this.getHotGoods()
		},
		components:{"goods-list":goodsList},
		methods: {
			//获取轮播图的数据
			async getSwipers(){
				/* console.log("获取轮播图数据s")
				uni.request({
					url:'http://localhost:8080/user/findAll',
					success:(res)=> {
						console.log("成功获取",res)
						this.swipers=res.data
					},
					fail(res) {
						console.log("获取失败")
					}
				}) */
				const res=await	this.$myRuquest({
					url:'/index/swipers'
				})
				this.swipers=res.data
			},
			
			//获取热门商品列表数据
		    async getHotGoods(){
				const res = await this.$myRuquest({
					url:'/hotgoods'
				})
				this.hotgoods=res.data
			},
			
			//导航点击事件
			navItemClick(url){
				uni.navigateTo({
					url:url
				})
			},
			
			//商品详情页点击事件，接收
			goGoodsDetail(id){
				uni.navigateTo({
					url:'/pages/goods-detail/goods-detail?id+'+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.home{
		swiper{
			width: 750rpx;
			height: 380rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
	}
	.nav{
		display: flex;
		.nav_item{
			width: 33%;
			text-align: center;
			view{
				width: 120rpx;
				height: 120rpx;
				background-color: #E88807;
				border-radius: 60rpx;
				margin: 5px auto;
				line-height: 120rpx;
				color: white;
				font-size: 35px;
			}
			text{
				font-size: 30rpx;
			}
		}
	}
	.hot_goods{
		background:#eee;
		overflow: hidden;//解决margin上下塌陷问题
		.tit{
			height: 50px;
			line-height: 50px;
			color: #E88807;
			text-align: center;
			letter-spacing: 20px;//间距
			background: #fff;
			margin: 5px 0;
		}
	}
	/* .goods_list{
		padding: 0 15rpx;
		display: flex;//在一行显示
		flex-wrap: wrap;//换行
		justify-content: space-between;//左右间距
		.goods_item{
			background-color: #fff;
			width: 355rpx;
			margin: 10rpx 0px;
			padding: 15rpx;
			box-sizing: border-box;
			image{
				width: 300rpx;
				height: 300rpx;
				display: block;
				margin: 0 auto;//图片居中
			}
			.price{
				color: red;
				font-size: 30rpx;
				margin: 7rpx 0;
				text:nth-child(2){
					color: #ccc;
					font-size: 28rpx;
					margin-left: 7rpx;
					text-decoration: line-through;
				}
			}
			.name{
				font-size: 28rpx;
				line-height: 50rpx;
				padding:10rpx 0px 7rpx 0rpx ;
			}
		}
	} */
	
</style>
